<style lang="scss" scoped>
    @import '~@/scss/public.scss';
    .comment-username{
        color:aquamarine;
        font-size: 16px;
    }

</style>
<template>
    <ui-main>

        <!-- 菜单 -->
        <div  class="ui-header">
            <div class="flex col-center row-center">
                <el-tabs @tab-click="getArticlesByGroup" v-model="navActiveTab" class="flex column column-col-bottom mr30 border-none">
                    <el-tab-pane v-for="item in navList" :key="item.title" :label="item.title" :name="item.title"></el-tab-pane>
                </el-tabs>
                <div class="mr30">
                    <el-input v-model="search.keyword" placeholder="输入关键字" size="small" style="width:300px;opacity:.9;">
                        <el-button-group slot="append">
                            <el-tooltip :open-delay="1000" effect="dark" content="搜索" placement="bottom-start">
                                <el-button @click="doSearch" style="border-right: 1px solid #eee;"><i class="el-icon-search"></i></el-button>
                            </el-tooltip>
                            <el-tooltip :open-delay="1000" effect="dark" content="清空" placement="bottom-start">
                                <el-button @click="search.keyword=''"><i class="el-icon-delete2"></i></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </el-input>
                </div>
            </div>
        </div>

        <div class="mt50">
            <!-- 拼图 -->
            <banner :banner="banner" :imgs="[topArticles[0],topArticles[1],recommendArticles]" ></banner>

            <div class="flex pr15 pt20">
                <!-- 文章列表 -->
                <div class="flex-5">
                    <div v-for="item in mainArticles" @click="linkArticlesDetails(item.id)" class="flex ui-border-bottom cursor-pointer ui-hover-shadow p10 mr30" >
                        <ui-img v-if="item.smeta" :url="item.smeta.thumb" style="width:180px;height:140px"></ui-img>
                        <div class="flex-1 ml15 flex column column-col-between">
                            <div>
                                <div class="f18 mb15">{{item.post_title}}</div>
                                <div class="flex row-between mb15">
                                    <div class="flex col-center">
                                        <ui-img v-if="item.smeta" :url="item.smeta.thumb" size="30px" class="bg-grey ui-circle"></ui-img>
                                        <span class="ml5">{{item.user_nicename || item.user_login || '匿名用户'}}</span>
                                        <span class="ml20 f10 f-color-grey">{{item.post_modified}}({{item.show_time}})</span>
                                    </div>
                                    <div class="f10 flex opacity-02">
                                        <div class="mr10 flex col-center">
                                            <icon name="comment" class="mr5"></icon> {{item.comment_count}}
                                        </div>
                                        <div class=" flex col-center">
                                            <icon name="star" class="mr5"></icon> {{item.favorite_num}}
                                        </div>
                                    </div>
                                </div>
                                <div class="f-color-text clamp-4">{{item.post_excerpt}}</div>
                            </div>
                            <div class="text-right f-color-blue">{{item.post_mime_type}}</div> 
                        </div>
                    </div>
                </div>
                <div class="flex-3">
                    <comment-list></comment-list>

                    <evaluation-list></evaluation-list>
                    
                    <popular-articles></popular-articles>

                    <popular-vedioes></popular-vedioes>
                </div>
            </div>
        </div>
    </ui-main>
</template>
<script>
    import commentList from './评论列表.vue'
    import evaluationList from './测评列表.vue'
    import popularArticles from './热门文章列表.vue'
    import popularVedioes from './热门视频列表.vue'
    import banner from '@/views/banner'
    export default {
        components:{
            commentList,
            evaluationList,
            popularArticles,
            popularVedioes,
            banner
        },
        data(){
            return {
                navActiveTab:'最新',
                navList:[
                    {title:'最新',id:7},
                    {title:'说事',id:11},
                    {title:'爆料',id:12},
                    {title:'内幕',id:13},
                    {title:'一本道',id:14},
                ],
                search:{
                    keyword:'',
                },
                banner:[],
                mainArticles:[],
                hotArticles:[],
                topArticles:[],
                recommendArticles:[],
                
            }
        },
        methods:{
            doSearch(){
                this.$http.get('index.php?g=home&m=content&a=post_list', {
                    params:{
                        keyword:this.search.keyword
                    }
                })
                .then(({data})=>{
                    console.log('查询文章',data)
                    if (data.code===1) {
                        this.mainArticles = data.data
                        this.navActiveTab = ''
                    }
                })
            },
            getArticlesByGroup(){//获取指定分类文章
                let activeItem
                this.navList.forEach((item)=>{
                    if (item.title === this.navActiveTab) {
                        activeItem = item
                        return
                    }
                })
                this.$http.get('index.php?g=home&m=content&a=sql_posts_paged', {
                    params:{
                        cid: activeItem.id
                    }
                })
                .then(({data})=>{
                    console.log(`文章分类 ${activeItem.title}(cid:${activeItem.id})`,data)
                    if (data.code===1) {
                        this.mainArticles = data.data
                    }
                })
            },
            linkArticlesDetails(id){
                this.$router.push({
                    name:'说事-文章详情',
                    query:{
                        id:id
                    }
                })
            },
            searchBack(){
                if (this.$route.path !== '/shuoshi') {
                    this.$router.push('/shuoshi')
                    this.$nextTick(() => {
                        document.querySelector('.ui-main-body-scroll').scrollTop = 0
                    })
                }
            }
        },
        created(){
            // 轮播图
            this.$http.get('index.php?g=home&m=Slide&a=slide_banner',{
                params:{
                    cate_id: 3
                }
            }).then(({data}) => {
                console.log('轮播图:', data);
                this.banner = data.data
            })

            // 加载文章列表
            this.getArticlesByGroup()

            // 测评
            // index.php?g=home&m=PaperRecord&a=company_detail
            // index.php?g=home&m=companyUser&a=company_detail
            this.$http.get('index.php?g=home&m=companyUser&a=company_detail', {
            })
            .then(({data})=>{
                console.log('测评数据',data)
            })

            // 顶置文章
            this.$http.get('index.php?g=home&m=content&a=get_attr_posts', {
                params:{
                    cid:7,
                    props:['istop']
                }
            })
            .then(({data})=>{
                console.log('顶置文章',data)
                if (data.code===1) {
                    this.topArticles = data.data
                }
            })
            // 热门文章
            this.$http.get('index.php?g=home&m=content&a=get_attr_posts', {
                params:{
                    cid:7,
                    props:['hot']
                }
            })
            .then(({data})=>{
                console.log('热门文章',data)
                if (data.code===1) {
                    this.hotArticles = data.data
                }
            })
            // 推荐文章
            this.$http.get('index.php?g=home&m=content&a=get_attr_posts', {
                params:{
                    cid:7,
                    props:['recommend']
                }
            })
            .then(({data})=>{
                console.log('推荐文章',data)
                if (data.code===1) {
                    this.recommendArticles = data.data[0]
                }
            })

        },
    }
</script>